<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- Javascript:核心语法+DOM(针对页面操作)+DOM(针对浏览器)
		 学习主体：针对页面操作比较多------DOM操作
		 JQuery操作DOM:理解：JQ框架改变页面内容效果
		 js基础就可以直接学习，了解函数使用
		 基础函数------事件源之后出现，事件源语法糖中
		 html()      作用：增加一个函数，覆盖原有html
		 val()       作用：针对input元素，实现修改文本框内容
		 text()      作用：生成文本作用
		 
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，改变下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur ea corporis ullam dolor, sit cumque asperiores, tempora obcaecati, magni minus eius quaerat non officia veniam voluptatem? Incidunt praesentium rerum distinctio?</p>
		<div style="width: 200px;height: 200px;background: #55ffff;"></div>
		<h3>lorem</h3>
		<input type="button" value="按钮2" />
		<input type="text"  value="文本"/>
		<script>
			 $("button").click(function(){
			   /* JQ操作DOM--html()函数使用 */
			   $("p").html("<h1>JQ操作DOM-html()函数使用</h1>");
			});  
			/*练习：div 200*200 背景色自定，鼠标滑过之后
			  下面元素改变 <h3>提示   修改为自定颜色*/
			  /* 练习：按钮 文本框  点击按钮，文本增加一行文本*/
			 $("div").mouseenter(function(){
				 $("h3").html("<h3>黄颜色</h3>");
			}); 
			$("input[type='button']").click(function(){
				$("input[type='text']").val("啊啊啊啊啊啊");
			}); 
			
			/* 利用JQ操作DOM (页面效果)       1.元素内容操作(3个函数)
			                                 html()
											 val()
											 text()
			                                 2.属性操作(4个函数)
											 <p align="center">
											 attr()
											 removeAttr()
											 <input checked>
											 prop()
											 removeProp()
											 3.演示类名操作(4个函数)
											 .demo(属性 属性值)
											 addClass()
											 removeClass()
											 toggleClass()
											 hasClass()
											 4.元素样式操作(5个函数)
											 css()
											 width()和hight()
											 outerWidth()和outerHight()
											 语法：css("css属性"，"css属性值")
											 $("选择器").attr().addClass();
											 5.插入和删除修改操作(7个函数)
											 append()和prepend()    										 
											 after()和before()         
											 remove()和empty()           
											 replaceWith()
											 6.元素遍历操作(6个函数)
											 7.JQ动画操作(7个函数)
			 */
		</script>
	</body>
</html>